<template>
  <div id="dynamic-component-demo" class="demo">
    <button v-for="(tab, index) in tabsName" v-bind:key="index"
    v-bind:class="['tab-button', { active: currentTab === index }]"
    v-on:click="currentTab = index">
    {{ tab }}
    </button>
    <component :is="currentTabComponent" class="tab"></component>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
import tabhome from "./TabHome.vue"
import tabposts from "./TabPosts.vue"
import tabarchive from "./TabArchive.vue"
export default {
    components: {
        tabhome,
        tabposts,
        tabarchive
    },
    setup () {
        const state = reactive({
            currentTab: 0,
            tabsCompoName: ['tabhome', 'tabposts', 'tabarchive'],
            tabsName: ['学校主页', '校内新闻', '大千世界']
        })

        const currentTabComponent = computed(() => {
            return state.tabsCompoName[state.currentTab]
        })

        return {
            ...toRefs(state),
            currentTabComponent
        }
    }
}
</script>

<style scoped>
.tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
}
.tab-button:hover {
    background: #f5d1d1;
}
.tab-button.active {
    background: #e0e0e0;
}
.demo-tab {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>